<!--表单中下拉树选择-->
<template>
  <tree-select 
    v-model="currentNode"
    value-format="object"
    :multiple="multiple" 
    :load-options="loadOptions" 
    :placeholder="placeholder" 
    :options="options" 
    :clearable="clearable"
    :disabled="disabled"
    :close-on-select="true"
    @input="handlerSelect"
  />
</template>

<script>
const url = '/api/sys/category/sys_category_main/treeData';
import formUtils from '@/utils/formUtils';
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import TreeSelect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
export default {
  name: "fancySysCategoryTree",
  components:{ 
    TreeSelect
  },
  props:{
    value: {
      type:String,
      default:''
    },
    id:{
      type:String,
      default:''
    },
    multiple:{
      type:Boolean,
      default:false
    },
    placeholder:{
      type:String,
      default:'请选择'
    },
    clearable:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    },
    required:{
      type:Boolean,
      default:false
    },
    modelName:{
      type:String,
      default:''
    },
    modelKey:{
      type:String,
      default:'category'
    }
  },
  data() {
    return {
      options:[],
      currentNode:undefined
      //currentNode:''
    }
  },
  created(){
    this.setCurrentNode(this.id,this.value);
    this.getTreeData("",(data)=>{
      this.options = [];
      data.forEach(d=>{
        d.label = d.name;
        delete d.name;
        this.options.push(d);
      })
    })
  },
  methods: {
    getTreeData(id,callback){
      let params = {
        fdParentId:id,
        fdModelName:this.modelName,
        fdModelKey:this.modelKey
      }
      this.$fetch('/api/sys/category/sys_category_main/treeData',params).then((res) => {
        if(typeof(callback) !='undefined'&& typeof(callback) === 'function'){
          if(res.status==1){
            return callback(res.data);
          }
        }
      });
    },
    loadOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        parentNode.children = [];
        this.getTreeData(parentNode.id,(data)=>{
          data.forEach(d=>{
            d.label = d.name;
            delete d.name;
            parentNode.children.push(d);
          })
          callback();
        })
      }
    },
    handlerSelect(node, instanceId){
      if(typeof(this.currentNode) === 'undefined'){
        this.$emit('input','');
        this.$emit('update:id','');
      }else{
        this.setCurrentNode(node.id,node.label);
        this.$emit('input',node.label);
        this.$emit('update:id',node.id);
      }
     
    },
    handlerDeselect(node,instanceId){
      console.log(node);
    },
    setCurrentNode(id,value){
      if(formUtils.isNotEmpty(value)){
        if(typeof(this.currentNode) === 'undefined'){
          this.currentNode = {id:'',label:''};
        }
        this.currentNode.id = id;
        this.currentNode.label = value;
      }
    }
  },
  watch: {
    id(newVal){
      // this.currentNode.id = newVal;
    },
    value(newVal){
      // this.currentNode.label = newVal;
    }
  }
};
</script>